<template>
		<a-table :columns="tableHead" :data-source="tableData">
			<template v-for="(item,index) in tableHead" :slot="'values'+index" slot-scope="tags,record" >
			<span :key="index">
							<a-popover title="将分析结果保存至用户分群" @click="onReadySave(index,record)" trigger="click">
								<UserDialog slot="content" :userDialogData="params"></UserDialog>
								<a-button type="link">{{tags}}<a-icon type="user-add"/> </a-button>
							</a-popover>
					</span>
			</template>
		</a-table>

</template>


<script>
	/**
	 * api 接口
	 * */
	import {exportReport,userAttrList} from '../../../../api/userAttr'
	import UserDialog from './userDialog'

	export default {
		name: 'table-funnel',

		props: {
			chartViewSourceData: {
				type: Object
			},
			leftConditions: {
				type: Array
			},
			isTotal: {
				type: Boolean
			}
		},
		components: {
			UserDialog
		},
		data() {
			return {
				switchPopovers: [],
				/* 显示dialog */
				visible: false,
				/* 全部的用户属性*/
				arrList: [],
				/* 传递给保存的数据*/
				params: {},
				backgroundColor: {background: '#f7f9fa'},
				/*是否按照某种或多种类型进行分组*/
				isByValues: false,
				// eslint-disable-next-line vue/no-dupe-keys
				attrAnalyseReportResData: {},
				tableData: [],
				tableHead: [],
				//是否展示创建用户分群
				showPopover:true
			}
		},
		computed:{

		},
		created() {
			// eslint-disable-next-line @typescript-eslint/no-this-alias
			let t = this
			t.tableHead = []
			t.tableData = []

			this.getUserAttr()
			t.$watch('chartViewSourceData', () => {
				t.doCovertChartData()
			})
			t.doCovertChartData()
		},
		mounted() {
			let items = []
			for (let i = 0; i < 10; i++) {
				let item = []
				for (let j = 0; j < 10; j++) {
					item.push(false)
				}
				items.push(item)
			}
			this.switchPopovers =items
		},
		methods: {
			changePopovers(row,column,change){

				this.switchPopovers[row][column] = change
			},
			doCovertChartData() {
				if (this.chartViewSourceData === undefined || this.chartViewSourceData.byFields === undefined) {
					return
				}
				let tableHead = this.initHead()
				let tableData = this.initData()
				this.tableHead = tableHead
				this.tableData = tableData
				this.$forceUpdate()
			},
			initHead() {
				let tableHead = []
				if (this.chartViewSourceData.byFields === null) {
					return tableHead
				}
				//如果选的是总数的情况
				if (this.isTotal){
					let field = this.chartViewSourceData.indicator.field
					let fieldName = ""
					for (let j = 0; j < this.arrList.length; j++) {
						if (field === this.arrList[j].attrCode) {
							fieldName = this.arrList[j].attrName
						}
					}
					let fieldTail = this.chartViewSourceData.indicator.aggregator.aggregatorAlias
					let tableHeadItem = {}
					tableHeadItem['title'] = fieldName + '的' + fieldTail
					tableHeadItem['className'] = 'table-head-class'
					tableHeadItem['align'] = "center"
					tableHeadItem['dataIndex'] = 0
					tableHeadItem['key'] = 0
					tableHead.push(tableHeadItem)
				}else{
					for (let i = 0; i < this.chartViewSourceData.byFields.length; i++) {
						if (this.chartViewSourceData.byFields[i].attrCode === this.chartViewSourceData.x_axis_field.attrCode) {
							let tableHeadItem = {}
							tableHeadItem['title'] = this.chartViewSourceData.byFields[i].attrName
							tableHeadItem['className'] = 'table-head-class'
							tableHeadItem['align'] = "center"
							tableHeadItem['dataIndex'] = this.chartViewSourceData.byFields[i].attrCode
							tableHeadItem['key'] = this.chartViewSourceData.byFields[i].attrCode
							tableHead.push(tableHeadItem)
						}
					}
					for (let i = 0; i < this.chartViewSourceData.rows.length; i++) {
						let tableHeadItem = {}
						tableHeadItem['align'] = "center"
						tableHeadItem['className'] = 'table-head-class'
						tableHeadItem['title'] = ""
						for (let j = 0; j <  this.chartViewSourceData.rows[i].byValues.length ; j++) {
							if (j === this.chartViewSourceData.rows[i].byValues.length - 1) {
								tableHeadItem['title'] += this.chartViewSourceData.rows[i].byValues[j]
							} else {
								tableHeadItem['title'] += this.chartViewSourceData.rows[i].byValues[j] + ","
							}
						}
						tableHeadItem['dataIndex'] = 'values' + i
						tableHeadItem['key'] = 'values' + i
						tableHeadItem['scopedSlots'] = { customRender: 'values' + i }

						tableHead.push(tableHeadItem)
					}
				}

				return tableHead
			},
			initData() {
				let tableData = []
				if (this.chartViewSourceData.series === null) {
					return tableData
				}
				if (this.isTotal){
					let tableDataItem = {}
					tableDataItem['key'] = 0
					tableDataItem[0] = this.chartViewSourceData.rows[0].values[0]
					tableData.push(tableDataItem)
				}else{
					for (let i = 0; i < this.chartViewSourceData.series.length; i++) {
						let tableDataItem = {}
						tableDataItem['key'] = i
						tableDataItem[this.chartViewSourceData.x_axis_field.attrCode] = this.chartViewSourceData.series[i]
						for (let j = 0; j < this.chartViewSourceData.rows.length; j++) {
							tableDataItem['values' + j] = this.chartViewSourceData.rows[j].values[i].toString()
						}
						tableData.push(tableDataItem)
					}
				}
				return tableData
			},
			onReadySave(tags,record) {
				console.log(tags)
				console.log(record)

				let rowNum = record.key
				let columnNum = Number(tags)
				let conditions = [{}]

				//横坐标对象
				conditions[0].functionAlias = "等于"
				conditions[0].functionCode = "equal"
				conditions[0].attr = {}
				for (let key in this.tableData[rowNum]) {
					if (key.indexOf('value') === -1 && key.indexOf('key') === -1) {
						conditions[0].attr['attrCode'] = key
						for (let i = 0; i < this.arrList.length; i++) {
							if (key === this.arrList[i].attrCode) {
								conditions[0].attr['attrName'] = this.arrList[i].attrName
							}
						}
						conditions[0].attr['attrType'] = 'user'
						conditions[0].params = []
						conditions[0].params[0] = record[conditions[0].attr.attrCode]
					}
				}

				//纵坐标对象
				let columnName = this.tableHead[columnNum + 1].title
				let columnNames = columnName.split(",")

				for (let i = 0; i < columnNames.length; i++) {
					let item = {}
					item['functionAlias'] = "等于"
					item['functionCode'] = "equal"
					item['attr'] = {}
					item['attr']['attrCode'] = this.chartViewSourceData.byFields[i + 1].attrCode
					for (let j = 0; j < this.arrList.length; j++) {
						if (item['attr']['attrCode'] === this.arrList[j].attrCode) {
							item['attr']['attrName'] = this.arrList[j].attrName
							item['attr']['attrType'] = 'user'
						}
					}
					item['params'] = []
					item['params'][0] = columnNames[i]
					conditions.push(item)
				}

				let params  = {}
				params['projectId'] = localStorage.getItem('productId')
				params['crowdName'] = "分组"
				params['condition'] = {}
				params['condition']['projectId'] = localStorage.getItem('productId')
				params['condition']['indicator'] = {}
				params['condition']['indicator']['aggregatorAlias'] = "用户列表"
				params['condition']['indicator']['aggregatorCode'] = "userIdListDis"
				params['condition']['indicator']['aggregatorCode'] = "userIdListDis"
				params['condition']['indicator']['filter'] = {}
				params['condition']['indicator']['filter']['conditions'] = conditions
				params['condition']['indicator']['filter']['relation'] = "and"
				params['condition']['indicator']['leftFilter'] = {}
				params['condition']['indicator']['leftFilter']['conditions'] = this.leftConditions
				params['type'] = 'userAttr'
				this.params =params

			},
			/*获取用户属性*/
			getUserAttr() {
				// eslint-disable-next-line @typescript-eslint/no-this-alias
				let t = this
				let param = {
					projectId: localStorage.getItem('productId')
				}
				userAttrList(param).then((res) =>{
					t.arrList = res.data
				}).catch((err) => {
					this.$message.error(err.msg || err.message, 5)
				})
			},

		},
		watch: {}
	}
</script>

<style>
	.popoverClass {
		padding: 0px !important;
		background: #000000;
	}

	.popper__arrow::after {
		border-top-color: #000000 !important;
	}
</style>
<style scoped lang="scss">

	/deep/ .el-table tbody tr:hover > td {
		background-color: #ffffff !important
	}

	/deep/ .el-table__body tr.current-row > td {
		background-color: #ffffff !important;
	}

	.table-head-class {
		color: #E62D2D;
		background-color: #E62D2D;
	}

	.item-value {
		text-align: center;
		height: 80px;

		.item-value-detail {
			height: 14px;
			line-height: 14px;
			font-size: 6px;
			margin-bottom: 2px;
		}

		.item-value-head {
			margin-bottom: 3px;
		}
	}

	.item-value-center {
		line-height: 80px;
	}

	::v-deep .el-table tbody td {
		padding: 5px 0;
	}

	.fix-height {
		height: 10px;
	}
</style>
